“Apex Notification Bar” Documentation by “Accesspress Themes” v1.0.0

---

“Apex Notification Bar”

---

Table of Contents

1. Installing Instructions
2. Notification Bar Lists
3. Building Notification Bar Using Pre Available Templates
4. Building Notification Bar Using Custom Design
5. Logo Section
6. Background Image Section
7. Notification Components
8. Notification Effects
9. Advanced Feature: Open Panel Notification Bar
10. Date Wise /Scheduled Notificaton Bar
11. Notification Bar Position
12. Custom CSS/ Custom JS
13. Notification Settings
14. Constant Contact API Settings
15. Opt In Settings
16. Page/Posts Wise Settings

---

A) Installing Instructions - top

1. Unzip apex-notification-bar.zip
2. Upload all the files to the /wp-content/plugins/apex-notification-bar
3. Activate the plugin through the 'Plugins' menu in WordPress.
4. For customizing the plugin's settings, click on Apex Notification Bar option menu in Wordpress left admin menu.

Once the plugin is installed and activated you will find a menu named "Apex Notification Bar" in the left menu bar of the admin menu.Once you click on that menu , you will go to the plugin's notification bar lists page. Basically there are 6 main settings which is individually described detaily below.

---

B) Notification Bar Lists - top

Once you install the plugin, you will find the Apex Notification Bar Menu on the left side admin menu bar.After you click the main menu, then you will reach at the notification bar lists page where you can find the lists of all the notification bars. On hover title of each notification bar after you created one, you can edit, delete ,copy as well as see preview of specific notification bar. If you haven't added any bar yet, then the page will show the notification bar not added yet message.

C) Building Notification Bar Using Pre Available Templates - top

On the left side admin menu bar, you will find Add New Bar sub menu option. After you click this sub menu , you can add new notification bar.Create your new notification bar with new bar name and configure your components. There are mainly 6 toggle section on add new notification bar page which are described below more briefly:

1) Notification Bar Layouts

If you don't want much styling in your notification bar then please create your notification bar by choosing Pre available template option in Notification Bar Layout section.There are altogether 15 available template with preview images.

A) Pre Available Templates

There are total 15 Pre Available Attractive Templates altogether which you can choose to display notification bar with different layouts, style and background color according to your site match template. Among 14 template, 1 pre available templates called Image Background provide features to display background images on notification bar. On choosing Image Background Pre Available Templates, BACKGROUND IMAGE SECTION toggle options will be shown below Logo Section toggle options where you can enable background image and upload any custom background image for specific notification bar. Whereas if choosed custom template instead of pre available template,there will be already BACKGROUND IMAGE SECTION toggle options below LOGO SECTION Toggle Options to upload background image.

D) Building Notification Bar by Custom Design - top

On the left side admin menu bar, you will find Add New Bar sub menu option. After you click this sub menu , you can add new notification bar. Create your new notification bar with new title. There are mainly 6 toggle section while adding new notification bar page which are described below more briefly:

1) Notification Bar Layout

If you wish to styling your notification bar by urself then please create your notification bar by choosing Custom design instead of Pre Available Template options as shown on above screenshot on Notification Bar Layout Toggle Settings.

Custom Template Design

On choosing custom layout, extra toggle settings will be appended below DURATION TO DISPLAY NOTIFICATION BAR and above NOTIFICATION BAR POSITION toggle title named as "NOTIFICATION BARS DESIGN" where includes many customization design options such as description & read more button custom options, background color for bar, font size, font family,font color with custom preview bar and many more.

This is main configuration settings section for custom design, you can set your own background color for notification bar, you can choose font color, font family with font size, all custom button background color with font color, success and error message color matching according to your design background color and close button or toogle button background color configuration settings.

E) Logo Section - top

Logo section is first column options where you can enable/disable logo section, upload custom logo, set custom url for logo , url target and also set custom width and height for custom logo options.

F)Background Image Settings - top

Among 14 pre available template, 1 pre available templates called Image Background provide features to display background images on notification bar. On choosing Image Background Pre Available Templates, BACKGROUND IMAGE SECTION toggle options will be shown below Logo Section toggle options where you can enable background image and upload any custom background image for specific notification bar.

Whereas for Custom Design Template instead of pre available template,there will be already BACKGROUND IMAGE SECTION toggle options below LOGO SECTION Toggle Options to upload background image.

G) Notification Bars Components - top

After choosing any pre available template or custom template option from Notification Bar Layout, there is another toggle section "Notification Bars Components" where you can choose Notification Bars Left or Right or both Components. To display left components simply check Left Components checkbox whereas to choose right components, simply check the Right Components checkbox option.

Also , once you checked left components options , then you can add any icons on left side of your notification bar template. Similarly, if you checked right components options , then you can add another components on right side of your notification bar template. You are free to insert various components as well like social icons, email subscription form, third party such as mailchimp, constant contact ,contact us call to action with popup contact form with contact form 7 integration support, other call to action buttons such as buy now, view more button with url link etc, Twitter tweets fetch and display etc in the notification bar which enhance your influence to your visitors

Left Components:

A) Add Social Icons

This is second components which will be shown after logo section and at left side of other right components which will be described below. In this section, you can add multiple social icons, if you have choosen pre available template on above Notification bar layout, then you can find available 20+ social icons.

a) Pre Available Font Awesome Icons

b) Custom Design Options For Custom Icons:

There is multiple options while adding custom icons for custom design templates such as

• Social Heading Text: Fill icons header text here for specific bar such as Follow Us
• Add Social Icon Button: Click on add social icon button in ortder to add social or any custom icons.
• Icon Title: Fill icon title name such as facebook, twitter.
• Select Icon: This dropdown includes available icons or custom icons for custom layout.In Available Font Icons , you can select provided font awesome icons to display whereas Custom icons will be displayed only if custom template is being choosen where you can add font awesome class such as fa fa-home.
• Custom Design Options:
  • Social Heading Text Color: Set above header text color for custom design only.
  • Icon Size: Set each icon size for icons for custom design only.
  • Icon Background Color: Set each icon background color.
  • Icon Font Color: Set each icon font or text color.
  • Icon Background Hover Color: Set each icon background hover color.
  • Icon Font Hover Color: Set each icon font or text hover color.
• Icon Link: Fill url link for specific choosed icon.
• Add Icons Button: Click on add icon button to add specific icons to display it on specific bar.

Right Components:

B) Enable Right Components

This is right and last section which will be shown after logo section and icons section. In this section, there are multiple components options to display on right side of notification bar such as static single content, multiple content, opt in subscribe form, twitter feeds , rss feeds , countdown timer and many more as shown on below image preview.

The right components are listed below. After enabling right components, there are 9 advanced components options which are described below.

1) Text(Custom Html Codes)

After choosing this text html option, you can still choose 2 options: static or multiple content.

a) Static Content Components

If you choose static content, you can add only single html text with or without call to action button which contains custom button with url link field and default contact form or contact form 7 shortcode integration or any shortcode intergration field for your notification bar. Custom button contains Link Button Text and Link Button URL field. On choosing Contact Button, Default Contact, you can input Contact Button Text,name,email,message label,placeholder,error message, success message configuration, send to mail input field to whom the details of user with their name, message and email will be send via email. Similarly, if you choose Contact Form 7 option,fill Contact Button Text and Contact Form 7 Shortcode in particular fields.

Below is the screenshot with Call to action options for static content and full description of call to action features options:

1) Call to action options > Custom Button:

This call to action button includes default contact form fields and contact form 7 integration as popup form display. This call to action option contain following fields:

• Link Button Text: Fill valid button text such as Read More, View More etc.
• Link Button URL: Fill valid button url link.
• Link Button Target: Set button url target.
• Custom Design Options:
  • Link Button Background Color: Set background color for custom button of call to action with url link.
  • Link Button Font Color: Set font color for custom button of call to action with url link.

2) Call to action options > Contact Button:

This call to action button includes default contact form fields and contact form 7 integration as popup form display. This call to action option contain following fields:

• Contact Button Text: Fill text for button which will work as popup contact form display.
• Name, Email, Message Label : Fill label text for each field.
• Name, Email, Message Placeholder: Fill Placeholder text for each field.
• Name, Email, Message Error Message If left empty: Set error message for each field.
• Name, Email, Message Required ?: Check enable for each field if is required.
• Send To Email: Fill valid email address to whom users contact details to send through mail. If left empty, email will send to admin email.
• Success Message: Set success message for frontend if user contact through this form.
• Fail Email Message: Set error message for frontend if user contact through this form.

Contact Form 7 Integration Options:

This call to action option contain following fields:

• Contact Button Text: Fill text for button which will work as popup form.
• Contact Form 7 Shortcode: Fill Shortcode of contact form 7 which you want to display on popup form.

3) Call to action options : Shortcode In Popup:

This call to action option contain following fields:

• Popup Button Text: On click Popup Button Text, the shortcode implemented will be displayed on popup.
• Shortcode: Fill any shortcode here that will be displayed on popup.

b) Multiple Content Components

If you choose multiple content, you can add multiple html text onclick button "Add Content" with or without call to action button which contains custom button with url link field and default contact form or contact form 7 shortcode integration for your notification bar. Similary, you can choose Notification Bar Effects as slider, ticker or scroller.

2) Opt-in form

Opt-in form components includes 3 subscribe form. Custom Subscribe form, mailchimp form or Constant Contact Form where you can set field placeholder text, mail confirmation custom message, enable mail confirmation after user subscribed from your site. Here, you can either choose custom subscribe form, mailchimp form or constant contact form. In Custom Subscribe form, there are input field for form header text, button text, email placeholder, error message and success message configuration fields as well as on click Enable Check Confirmation checkbox, the email will be send to subscribers with subscribing success message and details will be send to database. You can view details on clicking sub menu "Opt-In Settings".

In Mailchimp form, create your api key first and fill api input field to connect to your mailchimp account at Mailchimp API Settings Tab Section of Notification Settings Page of our plugin and click on save button. After save button, Lists of mailchimp account will be listed while creating bar and choosing mailchimp opt in form as right components. Choose 1 or multiple lists shown below label "Lists of this form subscribes to".

Similarly, In constant contact form, first of all create your constant contact account if not exist. Click on sub menu "Constant Contact API Settings" and add your account name, password, api key and access key. The information with link to create api key and access key are provided on Constant Contact API Settings" sub menu. Then you can choose any lists of constant contact shown below label "Lists this form subscribes to" in add form as shown on below screenshot.

Email Confirmation:

For all subscribe form, you can find email confirmation enable section where you can enable sending email to users right after user contact us. You can fill email subject as well as email message from Write Message to Subscribe Custom Html Field to send to contact users as shown on below screenshot image.

3) Twitter Tweets

Through this components , we can display twitter feeds with different effects such as slider, ticker or scroller type on right components of notification bar. After choosing twitter tweets option, you can fill Twitter Consumer Key, Twitter Consumer Secret,Twitter Access Token,Twitter Access Token Secret,Twitter Username,Cache Period and Total Number of Feed to display your twitter tweets with any type of notification effects such as slider, ticker or scroller.

4) Posts Title

In right components section, you can even choose posts title display either by filtering by category or show recent posts according to set order. You can choose recent posts or filter by category with 3 different effects as slider, ticker or scroller effect.In Posts Title, you can select posts title of particalur category to show as slider, ticker or scroller effects.You can choose multiple posts title from multiple select fields.

Steps : Select multiple post, page from dropdown lists by filtering category and Click on ADD POSTS button. The selected posts or page lists will be displayed as shown on screenshot below which is sortable. Then save notification bar after completing all configurations.

Show Recent Posts : Here you can choose to show recent posts too instead on filtering category wise. You can display posts title collection with read more button and show recent posts according to set order and many other options to confiugure.

5) RSS Feeds

In right components section, you can even choose rss feeds posts with the help of valid rss url link.You can display rss feeds with 3 different effects as slider, ticker or scroller type.This components includes enable RSS Feeds and set valid RSS URL,text button name with url link for each rss feeds which can be shown on right components with slider, ticker or scroller effects.

6) CountDown Timer

This plugin also provide features to display countdown timer as per your set time. The available options are enable/disable countdown timer, show timer description, 6 pre available beautifully designed countdown timer layouts, set timer date with animation, show custom button with url link for redirection and many more options such as show days, hours or seconds options. If you have choosed Custom Design instead of Pre available template from above Notification bar Layouts, then you can find extra custom options such as text description font color/size, options to set Timer Background Color,Font Color,Call To Action Button Background Color and Call To Action Button Font Color.

This components contain following options:

• Enable CountDown Timer
• Text Description
• Custom Design :
  • Text Font Color
  • Text Font Size
  • Timer Background Color
  • Timer Font Color
  • Call To Action Button Background Color
  • Call To Action Button Font Color
• Countdown Timer Layout
• Countdown Date
• Countdown Animation
• Show Days/Hours/Minutes/Seconds label
• Show Call To Action Button/ URL Link/ Link Target

Total 6 Countdown Timer Layout Design With Screenshot:

A) Layout 1 B) Layout 2 C) Layout 3 D) Layout 4 E) Layout 5 F) Layout 6

7) Video Popup

This plugin also provide features to display video popup. It includes options such as video title, description,video fontawesome icon by filling class name of font awesome icon,choose video type such as youtube video, vimeo or html5 type, video url link and video popup button text. It provides 4 pre available beautifully designed video popup layouts and also extra POPUP SETTINGS such as popup animation speed for video,animation speed,theme to display video on popup and Set Width/Height for Video Popup.

Other Video Popup Settings are :

• POPUP SETTINGS
• POPUP CUSTOM DESIGN LAYOUT (Note: This options will only be enabled if Notification Bar Layout is choosen As Custom Design)

Total 5 Video Layout Design With Screenshot:

A) Layout 1 B) Layout 2 C) Layout 3 D) Layout 4 E) Layout 5

8) Custom HTML

This plugin also provide features to display any custom HTML that you want to display to this notification bar at right side or last column of notification bar.

9) Search Form

This plugin also provide features to display search form. It includes options such as description,Search Input Field Placeholder,options to hide button text on search button or show only icon options, button text input field and search font icon field. It provides 5 different pre available beautifully designed Search form layout.

Other Search Form Settings For Custom Design are :

• SEARCH FORM CUSTOM DESIGN LAYOUT (Note: This options will only be enabled if Notification Bar Layout is choosen As Custom Design)

Total 5 Search Form Layout Design With Screenshot Preview:

A) Layout 1 B) Layout 2

Without Background Image

With Background Image

C) Layout 3 D) Layout 4 E) Layout 5

H) Notification Bar Effects For Right Components - top

You can choose Notification bar effects only on multiple content, twitter tweets, post title and rss feeds. In Notification bar effects, you can make the bar more stunning with various effects. There are options for Ticker with various configurations(duration, animation, speed), Slider with various configurations(duration, animation, speed, auto) and Scroller(left, right direction) with Animation type as Reveal or fade type.You can choose any one notification bar effects to make your notification bar more attractive.

Ticker Effect:

Slider Effect:

Scroller Effect:

I) Advanced Feature: Open Panel Notification Bar - top

This plugin provides extra advanced features to show open panel notification bar on your site. This includes enable/ disble open panel hover text,enable/disable header and footer text inside open panel section. Inside open panel section,you can add any widgets maximum availability of 3 columns section. Also if you have choosen custom templates instead of pre available template, then you can find Display Settings extra custom settings where you can set required custom options for open panel components.

Custom Design For Open Panel:

After choosing custom template instead of pre available template, you can see extra configuration options for open panel as shown on below screenshot images. All Configuration Options Field are:

• Enable Hover Text
• Hover Text
• Open Panel Header Section:
  • Enable Header Text
  • Header Text
  • Custom Design Options:
    • Header Text Color
  • Hide Border after Header
• Open Panel Footer Section:
  • Enable Footer Text
  • Footer Text
  • Custom Design Options:
    • Footer Text Color
  • Hide Border after Footer
• Custom Design > Display Settings (Note: This options will be only shown if custom template has been choosed instead of pre available templates.)
  • Border Color
  • Header Tag Color
  • Background Header Color
  • Background Header Border Color
  • Description Tag Color
  • Hyperlink Color
  • Hyperlink Hover Color
• Add Widgets Columns Settings: This section is to add widgets column wise inside open panel area.
  • Choose Columns : Choose columns for content display on panel.Maximum of 3 columns is available.
  • Add Widgets

Custom Design Configuration Options for Open Panel:

J) Date Wise /Scheduled Notificaton Bar - top

In this section, you can display notification bar as per date wise based. You can select start date and end date to display particular notification on specific time only.

K) Notification Bar Position - top

In this section, you can display notification bar on 5 different position such as on top(header fixed),top absolute(not fixed), bottom(footer), left and right of your site. Top Fixed simply stick your notification bar to header even on page scroll. Top Absolute remove sticky header and simply display notification bar and will scroll out of view when page is scrolled.

Similarly, you can choose Notification bar visibility such as Always show, show after some time with input field to Show Time Duration in milliseconds or Hide after some time with Hide time duration input field in milliseconds.

At last, you can choose Notification bar Close Button , where you can disable, toggle(show/hide) or show close button with different layout for pre available templates.

You can also check on Show Only Once For Logged In Users? option checkbox to enable hide notification bar forever on once click close button or on dismiss toggle button by any Logged-In Users. To reset this button enabled for all notification bar, simply go to Notification Settings and then General Settings Tab and Click on Reset Button which will reset all the saved flag or users who have once clicked the button and the bar wil be displayed again on your site for all users.

---

L) Custom CSS/ Custom JS - top

Here our plugin also provides features to add custom css as well as custom js for specific notification bar as per your site requirements.

1) Custom CSS: 2) Custom JS:

M) Notification Settings - top

This settings helps you to control the overall plugin.This contain following main settings:

• General Settings
• Mailchimp API Settings
• SMTP Configuration Settings
• Import/Export Settings

1) General Settings:

This settings helps you to control the overall plugin, you can enable or disable the plugin, enable or disable notification bar in mobile version, choose Default Top, Bottom, Left and Right Notification bar, Show notification bar on all pages or specific pages or only on home page and reset show only once bar flag to display the bar again to logged in users who have clicked the bar once.

2) Mailchimp API Settings:

Other settings are Mailchimp settings which helps you to connect with third party subscribe form i.e to your mailchimp account where you have to set api key of your mailchimp account to get mailchimp lists data.

3) SMTP Configuration Settings: Notification Settings also includes SMTP Configuration Setup to send emails instead of PHP mail function.

4) Import/Export Settings:

Notification Settings also includes import/export system for custom notification bar using json file.

---

N) Constant Contact API Settings - top

Our plugin has a feature to add subscribe form by using constant contact third party subscribe in your site.This settings helps you to connect with third party subscribe form i.e., constant contact simply creating api and access token key with your username and password as compulsory of your account in order to get lists of your subscribe form.You have to fill this sub menu form with username, password of your constant contact account and create api and token key and save the form. Then the lists of your account form will be listed on add new bar page on opt in form constant contact option of right compontents.

---

O) Opt-In Settings - top

Our plugin has a feature to list out all the details of subscribers who have subscribes from custom subscribe form of opt in form options. Similarly,you can remove and export csv of subscriber.This settings is for managing the subscriber as well as send email to any subscriber.

---

P) Page/Posts Wise Settings - top

Our plugin has a feature to select the notification bar in your site in your page, posts page are shown on right side of edit page or posts.You can choose any notification bar or choose default top, bottom, right and left notification bar from the page /posts /custom posts page to display the particular notification bar in specific page from back-end. All Default notification bar is set up from sub menu "Notification Settings". If you choose default on edit page here then, the page will display notification bar which is selected as default on "Notification Settings" sub menu page. You can even disable bar on any position such as select disable options on this right options of top, bottom ,left or right position too.

---

Once again, thank you so much for purchasing this plugin. As we said at the beginning, we'd be glad to help you if you have any questions relating to this plugin. No guarantees, but we'll do our best to assist. If you have a more general question relating to the plugin on CodeCanyon, you might consider visiting our site for forum and chat support.

Accesspress Themes

Go To Table of Contents

---